<template>
  <div class="user-dialog">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="名称" prop="appName">
        <a-input v-model="form.appName" placeholder="请输入名称" />
      </a-form-model-item>
      <a-form-model-item label="排序" prop="sortNum">
        <a-input-number v-model="form.sortNum" placeholder="请输入排序" />
      </a-form-model-item>
      <a-form-model-item label="状态" prop="state">
        <a-select v-model="form.state" placeholder="请选择用户状态">
          <a-select-option v-for="item in stateList" :key="item.state" :value="item.state">
            {{ item.description }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="描述" prop="description">
        <a-input v-model="form.description" type="textarea" placeholder="请输入描述" />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import orupService from '@/api/orupService'

export default {
  name: 'UserDialog',

  data () {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      form: {
        appName: '',
        sortNum: undefined,
        state: undefined,
        description: ''
      },
      rules: {
        appName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        sortNum: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        state: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      },
      stateList: []
    }
  },

  props: {
    record: {
      type: Object,
      default: () => ({})
    }
  },

  created () {
    this.loadData()
    this.form = this._.cloneDeep(this.record)
  },

  mounted () {
  },

  methods: {
    async loadData () {
      this.stateList = await orupService.userManageStateListQuery()
    },
    onSubmit () {
      let isValid = ''
      this.$refs.ruleForm.validate(valid => {
        isValid = valid
      })
      return isValid
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-input-number {
  width: 375px;
}

</style>
